<template>
  <div style="width:500px;height:500px;margin:50px auto 0 auto;background:#8E8E8E;padding:30px 0 0 50px; border-radius:45px">
    <span style="color:black">修改个人信息</span>
      <el-form ref="form" :model="form" label-width="100px" >
        <el-form-item label="姓名:">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="form.phone" ></el-input>
        </el-form-item>
        <el-form-item v-if="isLimit" label="身份:">
          <el-select v-model="form.type" >
             <el-option
                label="普通用户"
                value="0">
            </el-option>
            <el-option
              label="教练"
              value="1">
            </el-option>
             <el-option
              label="管理员"
              value="2">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别:">
           <el-select v-model="form.sex" >
             <el-option
                label="男"
                value="0">
            </el-option>
            <el-option
              label="女"
              value="1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月日:">
         <el-date-picker
          v-model="form.birthday"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button  @click="resetPserson">保存</el-button>
      <el-button v-if="!isLimit"  @click="dialogFormVisible = true">充值</el-button>
      </div>
       <el-dialog title="充值" :visible.sync="dialogFormVisible">
        <el-form :model="balanceForm">
            <el-form-item label="充值金额" >
            <el-input v-model="balanceForm.balance" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="renew">确 定</el-button>
        </div>
        </el-dialog>
  </div>
</template>

<script>
import webservice from "../../utils/webservice";
export default {
  data(){
    return{
      form:{},
      isLimit:true,
       balanceForm:{},
      dialogFormVisible:false
    }
  },
  created(){
    this.form = JSON.parse(window.sessionStorage.getItem('userInfo'))
    if(this.form){
      if(this.form.type==='1' || this.form.type==='2'){
         this.isLimit = true
      }else{
        this.isLimit = false
      }
    }
  },
  mounted(){

  },
  methods:{
    resetPserson(){
      let params = {
        id:this.form.id,
        name:this.form.name,
        type:this.form.type,
        sex:this.form.sex,
        phone:this.form.phone,
        birthday:this.form.birthday,
        balance:this.form.balance,
      }
      const _params = JSON.stringify(params)
      webservice.HttpPost(
        "/api/user/updateUserInfo",
        _params,
        (data) => {
        if (data.code === 200) {
            this.$message.success({
                message: '修改成功！',
                showClose: true,
                duration: 1000,
            });
            let _param ={
              id:this.form.id
            }
            const _params = JSON.stringify(_param)
            webservice.HttpPost(
                "/api/user/selectUserInfo",
                _params,
                (data) => {
                if (data.code === 200) {
                  window.sessionStorage.setItem('userInfo', JSON.stringify(data.data))
                  this.resetSetItem('userInfo',JSON.stringify(data.data));
                  this.$router.push('/PersonalInfo')
                } else{
                      this.$message.error({
                          message: data.message,
                          showClose: true,
                          duration: 1000,
                      });
                    }
                }
            );
        } else{
              this.$message.error({
                  message: data.message,
                  showClose: true,
                  duration: 1000,
              });
            }
        }
    );
    },
      renew(){
      let _param = {
        id: this.form.id,
        balance:this.balanceForm.balance
      };
      const params = JSON.stringify(_param)
      webservice.HttpPost("/api/user/renew", params, (data) => {
        if (data.code === 200) {
          this.$message.success({
            message: "充值成功,待审核",
            showClose: true,
            duration: 1000,
          });
          this.dialogFormVisible = false
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
        }
  }
}
</script>

<style scoped>
.el-form{
  /* height: 400px; */
  width: 500px;
  margin-top: 30px;
}
.el-input{
  width:60%;
}
.el-select{
  width:60%;
}
.button{
   width: 500px;
  display: flex;
  justify-content: space-around;
  margin-top: 65px;
}
</style>